import React, { Component } from 'react'
import  { Table, Card,Icon,Button,message} from 'antd'
import { reqCategory,addCategory,updateCategory} from '../../api'
import Linkbutton from '../../components/link-button'
import FirstcatorgayModal from './firstcatorgay.js'
import CheckCatorgray from './checkCatorgray.js'


 

  
  export default class Category extends Component {
  constructor(props) {
    super(props)
    this.state={
      categoryData:[],
      secondCategroyDta:[],
      parentId:'0',
      parentName:'',
      showFirstcatorgayModal:false,
      showCheckCatorgrayModal:false,
      loading:true
 
    }
  }


  componentDidMount (){
    
  this.getCategoryList()

  }
  
  UNSAFE_componentWillMount(){
     this.initCloums()
   }

    initCloums=()=>{
      return this.columns= [
        {
          title: '分类名称',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '操作',
          width:300,
          dataIndex: 'age',
          key: 'age',
          render: (text, record, index)=>{
          return   <span>
              <Linkbutton onClick={()=>this.showCheckCatorgray(record)}>修改分类</Linkbutton>
              {this.state.parentId==='0' &&( <Linkbutton onClick={()=>this.getSecondCategory(record)}>查看子分类</Linkbutton>)}
             
              </span>
          }
        },
        
      ];
    }
 
   getCategoryList=()=>{
     const {parentId} = this.state
    reqCategory(parentId)
    .then(res=>{
     if(res.status===0){
       if(parentId === '0'){
        this.setState({
          categoryData:res.data
         })
       }else{
         this.setState({
           secondCategroyDta:res.data
         })
       }
     
     }else{
       message.error('获取分类列表失败')
     }
     this.setState({
       loading:false
     })
    })

   }

   getSecondCategory = (record)=>{
     this.setState({
      parentId:record._id,
      parentName:record.name
     },()=>{
       this.getCategoryList()
     })
    
   }

    showFirstcatorgayModal=()=>{

      this.setState({
      showFirstcatorgayModal:true
        })
      }



   hideFirstcatorgayModal= ()=>{
    this.setState({
      showFirstcatorgayModal:false
    })
    this.form.resetFields()
     this.addCategory()
     this.getCategoryList()
    
  }
  showCheckCatorgray=(record)=>{
    this.setState({
      showCheckCatorgrayModal:true,
    })

    this.category = record
  }
    
 
  hideCheckCatorgrayModal= async ()=>{
      const { categoryName} = this.updateRef.props.form.getFieldsValue()
      const categoryId = this.category._id
      this.setState({
        showCheckCatorgrayModal:false
       })

      this.updateRef.props.form.resetFields()
        const res = await updateCategory({categoryId,categoryName})
        if(res.status===0){
          this.getCategoryList()
        }
    
  }


   addCategory= async ()=>{
     const { categoryName,parentId} =this.addform.getFieldsValue()
    //  console.log('dsdht',this.addform.getFieldsValue())
    //  console.log('adderr',this.formRef.props.form.getFieldsValue())
    this.addform.resetFields()
     const result = await addCategory({parentId,categoryName})
     console.log('parentd==id',result)
   }
 

   showOneCategory=()=>{
     this.setState({
       parentId:'0',
       parentName:''
     },()=>{
       this.getCategoryList()
     })
   }


   
    render() {
      const {showFirstcatorgayModal,categoryData,
        parentId,
        loading,
        secondCategroyDta,
        showCheckCatorgrayModal,
        parentName
      } = this.state
      const category = this.category || {}
        const extra = ( <Button type='primary' onClick={this.showFirstcatorgayModal}> <Icon type='plus'/> 添加 </Button> )

        const title = parentId==='0'? ( <Linkbutton onClick={this.showOneCategory}>一级分类</Linkbutton>)
      :(
        <span>
           <Linkbutton onClick={this.showOneCategory}>一级分类</Linkbutton>
        <Icon type="arrow-right" />
        {parentName}
        </span>
       
      )
    
 
        return (
            <div>
              {/* 添加分类弹框 */}
              <FirstcatorgayModal 
              visible = {showFirstcatorgayModal}
              onOk={this.hideFirstcatorgayModal}
              // onCancel={this.hideFirstcatorgayModal}
              onCancel={()=>this.setState({showFirstcatorgayModal:false})}
              wrappedComponentRef={(inst) => this.formRef = inst} 
              categoryData={categoryData}
              parentId={parentId}
              setForm={(form)=>this.addform=form}
               />

               {/* 修改分类名称弹框 */}
                
                <CheckCatorgray
                value={parentName}
                visible={showCheckCatorgrayModal}
                 onOk={this.hideCheckCatorgrayModal}
                //  onCancel={this.hideCheckCatorgrayModal}
                 onCancel={()=>this.setState({hideFirstcatorgayModal:false})}
                 categoryName={category.name}
                 wrappedComponentRef={(ref) => this.updateRef = ref} 
                 setForm={form => this.form = form}
                 />

              <Card title={title} extra={extra}>
                <Table  
                loading={loading}
                  rowKey= "_id"
                  bordered
                columns={this.columns}
                pagination={{
                  defaultPageSize:5,
                  showQuickJumper:true
                }}
                 dataSource={ parentId === '0' ? categoryData : secondCategroyDta} />
                
              </Card>
            </div>
        )
    }
}
